<html>
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,initial-scale=1" name="viewport">
    <title>视频分享</title>
    <link href="./lib/base.css" rel="stylesheet" type="text/css">
    <link data-react-helmet="true" href="logo.svg" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<div id="app" style="opacity: 0">
    <div class="head">
        <h1 class="t c"><img src="logo.svg" style="margin-right:5px;" width="30px"> 视频分享</h1>
        <p class="s-t">- Share it with everyone. -</p>

        <div class="c d-upload">
            <div class="btn" onclick="$('#file').click()">上传你的视频</div>
            <div class="d-msg" v-if="uploadVideoResult">
                <span class="msg">{{uploadVideoResult}}</span>
                <a :data-clipboard-text="uploadVideoResult" href="javascript: void(0)" id="copy">{{copyText}}</a>
            </div>
            <input @change="handleFileChange($event)" accept="video/*" id="file" style="display: none" type="file">
        </div>
        <div class="p">
            <div class="pr"></div>
        </div>
    </div>
    <div class="preview c" v-if="videoId">
        <video :src="'/upload/' + videoId" autoplay controls="controls" id="preview-video">您的浏览器不支持 video 标签。
        </video>
    </div>
    <div class="c">
        <span class="c s-new"><img src="new.svg" style="margin-right:5px;" width="20px"> 最近更新</span>
    </div>
    <div class="content">
        <video :src="'/upload/' + video" controls="controls" id="video" v-for="video in videoList">您的浏览器不支持 video 标签。
        </video>
    </div>
    <div v-if="hasMore">
        <a @click="loadData" class="more" href="javascript:void(0)">加载更多</a>
    </div>
</div>
<script src="./lib/vue.js"></script>
<script src="./lib/jquery.min.js"></script>
<script src="./lib/upload-util.js"></script>
<script src="./lib/clipboard.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
  app = new Vue({
    data() {
      return {
        msg: '',
        videoList: [],

        page: 1,
        hasMore: true,

        uploadVideoResult: undefined,
        copyText: '复制分享',
        videoId: undefined
      }
    },
    methods: {
      handleFileChange($event) {
        let self = this;
        let $progress = $('.pr'), $file = $event.srcElement;
        $progress.css('width', '0')
        fileUpload('/upload', $file, null, progress => {
          console.log(progress)
          $progress.css('width', progress.completePercent)
        }, success => {
          console.log(success)
          let res = JSON.parse(success.currentTarget.responseText)
          if (res.code) {
            $file.value = ''
            self.videoList.splice(0, self.videoList.length)
            self.page = 1
            self.uploadVideoResult = location.origin + '/?v=' + res.url.replace('public/upload/', '')
            self.loadData()
          }
        }, error => {
          console.log(error)
          $file.value = ''
        }, cancel => {
          console.log(cancel)
          $file.value = ''
        })
      },
      loadData() {
        $.get('/file/list', { page: this.page++ }, res => {
            console.log(res)
            this.videoList = this.videoList.concat(res.data)
            this.hasMore = res.data.length > 0
            $('#app').css('opacity', '1')
          }
        )
      }
    },
    mounted() {
      let c = new ClipboardJS('#copy')
      c.on('success', (e) => {
        this.copyText = '已复制'
      });
    },
    created() {
      this.loadData()
      let params = new URLSearchParams(location.search)
      this.videoId = params.get('v')
    }
  }).$mount('#app')
</script>
</body>
</html>
